<template>
  <van-sidebar :active-key="activeKey" @change="onChange">
    <van-sidebar-item
      :title="item.title"
      v-for="(item,index) in sideMenuList"
      :key="`side_menu_list_${index}`"
    />
  </van-sidebar>
</template>

<script>
import { Sidebar, SidebarItem } from "vant";
Vue.use(Sidebar);
Vue.use(SidebarItem);
export default {
  name: "sideMenu",
  props: {
    sideMenuList: {
      type: Array,
      default: () => []
    },
    value: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeKey: 0
    };
  },

  methods: {
    onChange(key) {
      this.activeKey = key;
      this.$emit('input', key)
    }
  }
};
</script>

<style lang="less">
.van-sidebar {
  width: 81px;
  height: 100%;
  background: rgba(250, 250, 250, 1);
  .van-sidebar-item {
    display: flex;
    justify-content: center;
    border: none;
    padding: 15px 0px 12px 0px;
    .van-sidebar-item__text {
      text-align: center;
      width: 100%;
      border-left: 3px solid transparent;
      font-size: 13px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(48, 48, 48, 1);
    }
  }
  .van-sidebar-item--select {
    color: #007c9d;
    font-weight: 500;
    font-family: PingFangSC-Medium;
    border-color: #007c9d;
    .van-sidebar-item__text {
      text-align: center;
      width: 100%;
      border-left: 3px solid #007c9d;
      font-size: 13px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(48, 48, 48, 1);
    }
  }
}
</style>
